<template>
  <div>
    <!-- 
      声明式导航 router-link 
        + router-link它默认编译生成的html标签为a标签
        + to 目标路径 string | object  必须的属性
        + replace 默认false，为true时，进行替换操作，跳转到的地址替换上一个地址，history.replaceState  true不可回退
        + activeClass string 定义激活样式，可选，默认为 router-link-active router-link-exact-active
          多数情况下，用其中一个就可以了，都可以用来区别激活样式
          router-link-active        严格不严格都生效
          router-link-exact-active  严格匹配时生效
          to='/home' 而当前地址栏中的pathname也为 /home 它就会生效，此router-link为激活
     -->
    <!-- <router-link to="/" active-class="abc">首页</router-link> -->
    <!-- replace 直接只写的一个replace,表示为true,不写为false -->
    <!-- <router-link to="/" replace>首页</router-link> -->
    <router-link :to="{ path: '/' }" replace>首页</router-link>
    &nbsp;&nbsp;|&nbsp;&nbsp;
    <!-- <router-link to="/about" replace>关于</router-link>&nbsp;&nbsp;|&nbsp;&nbsp; -->
    <router-link :to="{ name: 'about' }" replace>关于</router-link
    >&nbsp;&nbsp;|&nbsp;&nbsp;
    <router-link to="/login" replace>登录</router-link>&nbsp;&nbsp;|&nbsp;&nbsp;
    <router-link to="/news" replace>新闻</router-link>&nbsp;&nbsp;|&nbsp;&nbsp;
    <router-link to="/admin" replace>后台</router-link>
  </div>
  <!-- 路由匹配成功后渲染的组件所在的位置 -->
  <RouterView />
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.router-link-active {
  color: red;
  font-weight: bold;
}
</style>
